<!-- 页面  -->
<template>
  <s-layout title="兑换专区" :bgStyle="{ color: '#f2f2f2' }">
    <view class="sousuo-box">
      <uni-easyinput prefixIcon="search" v-model="state.search_value" placeholder="搜索"
        @iconClick="searchBtn" @confirm="searchBtn">
      </uni-easyinput>
    </view>

    <view class="ss-p-20 score-card-box">
      <view v-for="item in state.pagination.data" :key="item.id" class="ss-m-b-20 score-card-card">
        <s-score-card size="sl" :data="item" priceColor="#FF3000"></s-score-card>
      </view>
    </view>
    <s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png" text="暂无兑换商品"></s-empty>
    <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
      contentdown: '上拉加载更多',
    }" @tap="loadmore" />
  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import _ from 'lodash';

const state = reactive({
  pagination: {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  },
  loadStatus: '',
  search_value: ''
});
async function getData(page = 1, list_rows = 5, keywords = "") {
  state.loadStatus = 'loading';
  let res = await sheep.$api.app.scoreShop.list({
    list_rows,
    page,
    keywords
  });
  if (res.code === 1) {
    let couponlist = _.concat(state.pagination.data, res.data.data);
    state.pagination = {
      ...res.data,
      data: couponlist,
    };
    if (state.pagination.current_page < state.pagination.last_page) {
      state.loadStatus = 'more';
    } else {
      state.loadStatus = 'noMore';
    }
  }
}
//搜索
function searchBtn() {
  state.pagination.data = [];
  getData(1, 5, state.search_value);
}


// 加载更多
function loadmore() {
  if (state.loadStatus !== 'noMore') {
    getData(state.pagination.current_page + 1);
  }
}

// 上拉加载更多
onReachBottom(() => {
  loadmore();
});
onLoad(() => {
  getData();
});
</script>

<style scoped>
.score-card-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.score-card-card {
  width: 48%;
}

.sousuo-box {
  padding: 20rpx 20rpx 0 20rpx;
}

.sousuo-box /deep/.is-input-border {
  border-radius: 18.5px;
  background-color: #fff;
}
</style>
